<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo</title>

    <link rel="stylesheet" href="__STATIC__/assest/css/reset1.css">
    <link rel="stylesheet" href="__STATIC__/assest/css/index.css">
</head>
<body>

<header class="header">
    <div class="header-inner body-width">
        <a href="#" class="logo"></a>
        <div class="category">
            <a href="#" class="category-link">分类</a>
            <i class="icon-arrow"></i>
            <div class="category-result"></div>
            <!-- 边框 -->
            <span class="btn-border"></span>
            <span class="result-border"></span>
            <span class="neck-border"></span>
        </div>
        <div class="search">
            <input type="text" class="search-text" placeholder="Seach here...">
            <button class="search-btn"><i class="icon-search"></i></button>
        </div>
        <nav class="header-nav">
            <ul>
                <li>
                    <span class="line"></span>
                    <a href="#" class="dreamer">tang生活家</a>
                    <i class="icon-text__pink icon-new">new</i>
                </li>
                <li>
                    <span class="line"></span>
                    <a href="#" class="icon-text__pink register">注册</a>
                </li>
                <li>
                    <span class="line"></span>
                    <a href="#">登录</a>
                </li>
                <li>
                    <span class="line"></span>
                    <i class="icon-app"></i>
                    <a href="#" class="app">手机版</a>
                    <i class="icon-arrow"></i>
                    <div class="app-hover">
                        <a href="#"></a>
                        <p>扫一扫下载手机客户端</p>
                    </div>
                </li>
            </ul>
        </nav>
    </div>
    <div class="header-shadow"></div>
</header>

<div class="main">
    <div class="main-inner body-width">
        <div class="banner clearfix">
            <div class="slider" id="slider">
                <ul class="slider-wrapper">
                    {volist name="perfume" id="vo"}
                    <li class="item" data-title="{$vo.perfumename}">
                        <a href="#" class="pic"><img src="__STATIC__/assest/images/{$vo.pic}" alt="#"></a>
                    </li>
                    {/volist}
                </ul>
                <a href="javascript:;" class="slider-prev"></a>
                <a href="javascript:;" class="slider-next"></a>
                <div class="slider-title">
                    <h2></h2>
                    <span></span>
                </div>
                <div class="slider-btns">
                    <span class="item"></span>
                    <span class="item"></span>
                    <span class="item"></span>
                    <span class="item"></span>
                    <span class="item"></span>
                </div>
            </div>
            <div class="banner-info">
                <div class="news body-border">
                    <ul>
                        <li class="title">社区热点</li>
                        <li class="link">
                            <a href="#">冬天</a>
                            <span></span>
                            <a href="#">把生活过成一首诗</a>
                            <span></span>
                            <a href="#">早餐</a>
                            <span></span>
                            <a href="#">记下时间走过的路</a>
                            <span></span>
                            <a href="#">穿搭</a>
                            <span></span>
                            <a href="#">家居</a>
                            <span></span>
                            <a href="#">原创</a>
                            <span></span>
                        </li>
                        <li class="choose">
                            <a href="#">『人气连衣裙精选』 大合集</a>
                            <span class="icon-text__pink">精选</span>
                        </li>
                        <li class="assistant">
                            <p>收图小助手:  <a href="#">tang收集工具</a></p>
                        </li>
                    </ul>
                </div>
                <div class="app body-border"><a href="#"></a></div>
            </div>
        </div>
        <div class="main-cont main-album">
            <div class="main-cont__title">
                <h3>专辑精选</h3>
                <a href="#" class="more">往期回顾 ></a>
            </div>
            <ul class="main-cont__list clearfix">
                {volist name="base" id="vo" offset="0" length='1'}
                <li class="item">
                    <a href="#" class="pic"><img src="__STATIC__/assest/images/{$vo.pic}" alt="#"></a>
                    <div class="info">
                        <a href="#" class="title">你距离女神只差一个底妆</a>
                        <p>{$vo.basename}</p>
                        <p><a href="#" class="author">{$vo.uploadtime}</a></p>
                    </div>
                </li>
                {/volist}
                {volist name="clean" id="vo" offset="0" length='1'}
                <li class="item">
                    <a href="#" class="pic"><img src="__STATIC__/assest/images/{$vo.pic}" alt="#"></a>
                    <div class="info">
                        <a href="#" class="title">你距离女神只差一个卸妆水</a>
                        <p>{$vo.cleanname}</p>
                        <p><a href="#" class="author">{$vo.uploadtime}</a></p>
                    </div>
                </li>
                {/volist}
                {volist name="eye" id="vo" offset="1" length='1'}
                <li class="item">
                    <a href="#" class="pic"><img src="__STATIC__/assest/images/{$vo.pic}" alt="#"></a>
                    <div class="info">
                        <a href="#" class="title">你距离女神只差一个眼影</a>
                        <p>{$vo.eyename}</p>
                        <p><a href="#" class="author">{$vo.uploadtime}</a></p>
                    </div>
                </li>
                {/volist}
                {volist name="lipstick" id="vo" offset="0" length='2'}
                <li class="item">
                    <a href="#" class="pic"><img src="__STATIC__/assest/images/{$vo.pic}" alt="#"></a>
                    <div class="info">
                        <a href="#" class="title">你距离女神只差一个口红</a>
                        <p>{$vo.lipstickname}</p>
                        <p><a href="#" class="author">{$vo.uploadtime}</a></p>
                    </div>
                </li>
                {/volist}
            </ul>
        </div>
        <div class="main-cont main-recommend">
            <div class="main-cont__title">
                <h3>好物推荐</h3>
                <p class="list">
                    {volist name="types" id="ty"}
                    <a href="#">{$ty.typename}</a>
                    <span>|</span>
                    {/volist}
                </p>
            </div>
            <ul class="main-cont__list clearfix">
                <li class="item">
                    {volist name="eye" id="vo" offset="3" length='1'}
                    <a href="#" class="pic"><img style="width: 100%;height: 224px;" src="__STATIC__/assest/images/{$vo.pic}" alt="#"></a>
                    {/volist}
                    <div class="info">
                        <a href="{:url('intro/index')}" class="title">眼影</a>
                        <span>18739人在逛</span>
                        <a href="#" class="icon-text__pink purchase">良品购</a>
                    </div>
                </li>
                <li class="item">
                    {volist name="lipstick" id="vo" offset="3" length='1'}
                    <a href="#" class="pic"><img style="width: 100%;height: 224px;" src="__STATIC__/assest/images/{$vo.pic}" alt="#"></a>
                    {/volist}
                    <div class="info">
                        <a href="#" class="title">口红</a>
                        <span>18739人在逛</span>
                        <a href="#" class="icon-text__pink purchase">良品购</a>
                    </div>
                </li>
                <li class="item">
                    {volist name="perfume" id="vo" offset="0" length='1'}
                    <a href="#" class="pic"><img style="width: 100%;height: 224px;" src="__STATIC__/assest/images/{$vo.pic}" alt="#"></a>
                    {/volist}
                    <div class="info">
                        <a href="#" class="title">香水</a>
                        <span>18739人在逛</span>
                        <a href="#" class="icon-text__pink purchase">良品购</a>
                    </div>
                </li>
                <li class="item">
                    {volist name="skin" id="vo" offset="3" length='1'}
                    <a href="#" class="pic"><img style="width: 100%;height: 224px;" src="__STATIC__/assest/images/{$vo.pic}" alt="#"></a>
                    {/volist}
                    <div class="info">
                        <a href="#" class="title">护肤</a>
                        <span>18739人在逛</span>
                        <a href="#" class="icon-text__pink purchase">良品购</a>
                    </div>
                </li>
                <li class="item">
                    {volist name="face" id="vo" offset="3" length='1'}
                    <a href="#" class="pic"><img style="width: 100%;height: 224px;" src="__STATIC__/assest/images/{$vo.pic}" alt="#"></a>
                    {/volist}
                    <div class="info">
                        <a href="#" class="title">洁面</a>
                        <span>18739人在逛</span>
                        <a href="#" class="icon-text__pink purchase">良品购</a>
                    </div>
                </li>
            </ul>
        </div>
        <div class="main-cont main-user">
            <div class="main-cont__title">
                <h3>达人推荐</h3>
                <a href="#" class="more">更多达人 ></a>
            </div>
            <ul class="main-cont__list clearfix">
                <li class="item">
                    <a href="#" class="pic" style=" background: url(__STATIC__/assest/images/cont/user_img1.jpg) no-repeat; background-size: cover; "></a>
                    <a href="#" class="headImg"><img src="__STATIC__/assest/images/cont/head_img1.jpeg" alt="#"></a>
                    <div class="info">
                        <a href="#" class="info-title">虽虽酱</a>
                        <p><i class="icon-star"></i>9645</p>
                        <p>擅长领域: <b>Q版</b></p>
                    </div>
                </li>
                <li class="item">
                    <a href="#" class="pic" style=" background: url(__STATIC__/assest/images/cont/user_img2.jpg) no-repeat; background-size: cover; "></a>
                    <a href="#" class="headImg"><img src="__STATIC__/assest/images/cont/head_img2.jpeg" alt="#"></a>
                    <div class="info">
                        <a href="#" class="info-title">虽虽酱</a>
                        <p><i class="icon-star"></i>9645</p>
                        <p>擅长领域: <b>Q版</b></p>
                    </div>
                </li>
                <li class="item">
                    <a href="#" class="pic" style=" background: url(__STATIC__/assest/images/cont/user_img3.jpg) no-repeat; background-size: cover; "></a>
                    <a href="#" class="headImg"><img src="__STATIC__/assest/images/cont/head_img3.jpeg" alt="#"></a>
                    <div class="info">
                        <a href="#" class="info-title">虽虽酱</a>
                        <p><i class="icon-star"></i>9645</p>
                        <p>擅长领域: <b>Q版</b></p>
                    </div>
                </li>
                <li class="item">
                    <a href="#" class="pic" style=" background: url(__STATIC__/assest/images/cont/user_img4.jpg) no-repeat; background-size: cover; "></a>
                    <a href="#" class="headImg"><img src="__STATIC__/assest/images/cont/head_img4.jpeg" alt="#"></a>
                    <div class="info">
                        <a href="#" class="info-title">虽虽酱</a>
                        <p><i class="icon-star"></i>9645</p>
                        <p>擅长领域: <b>Q版</b></p>
                    </div>
                </li>
                <li class="item">
                    <a href="#" class="pic" style=" background: url(__STATIC__/assest/images/cont/user_img5.jpg) no-repeat; background-size: cover; "></a>
                    <a href="#" class="headImg"><img src="__STATIC__/assest/images/cont/head_img5.jpeg" alt="#"></a>
                    <div class="info">
                        <a href="#" class="info-title">虽虽酱</a>
                        <p><i class="icon-star"></i>9645</p>
                        <p>擅长领域: <b>Q版</b></p>
                    </div>
                </li>
            </ul>
        </div>
        <div class="main-cont main-waterfall">
            <div class="main-cont__title">
                <h3>大家正在看</h3>
            </div>
            <ul class="main-cont__list clearfix">
                {volist name="lipstick" id="vo" offset="0" length='15'}
                <li class="item item-cur">
                    <a href="#" class="pic">
                        <img src="__STATIC__/assest/images/{$vo.pic}" alt="#">
                    </a>
                    <div class="waterfall-hover">
                        <span class="mask"></span>
                        <a href="#" class="btn-collect">收集  {$vo.hittimes}</a>
                        <a href="#" class="btn-white btn-like"></a>
                        <a href="#" class="btn-white btn-comment"></a>
                    </div>
                    <div class="waterfall-info">
                        <p class="title">Fendi（芬迪） 2017早春度假系列</p>
                        <p class="icon"><span class="icon-star">89</span><span class="icon-like">10</span></p>
                    </div>
                    <div class="collect-info">
                        <a href="#" class="headImg"><img src="__STATIC__/assest/images/cont/waterfall_headImg1.jpeg" alt="#"></a>
                        <p class="title"><a href="#">大祁Y</a></p>
                        <p class="to">收集到<a href="#">时尚语型录</a></p>
                    </div>
                </li>
                {/volist}
            </ul>
        </div>
    </div>
    <a href="#" id="readMore">浏览更多 ></a>
</div>

<footer class="footer">
    <div class="footer-container">
        <div class="footer-link">
            <div class="footer-link__item">
                <h4 class="footer-title">关于我们</h4>
                <ul class="footer-list">
                    <li class="item"><a href="#">关于我们</a></li>
                    <li class="item"><a href="#">帮助中心</a></li>
                    <li class="item"><a href="#">加入我们</a></li>
                    <li class="item"><a href="#">联系我们</a></li>
                    <li class="item"><a href="#">标签集</a></li>
                    <li class="item"><a href="#">商务合作</a></li>
                    <li class="item"><a href="#">免责声明</a></li>
                </ul>
            </div>
            <div class="footer-link__item">
                <h4 class="footer-title">手机应用</h4>
                <ul class="footer-list">
                    <li class="item"><a href="#">关于我们</a></li>
                    <li class="item"><a href="#">帮助中心</a></li>
                    <li class="item"><a href="#">加入我们</a></li>
                </ul>
            </div>
            <div class="footer-link__item">
                <div class="footer-orcode"><img style="width: 70%;height: 150px;" src="{:url('index/index/qrcode')}" alt="#"></div>
                <div class="orcode-text">
                    <p>扫描二维码</p>
                    <p>访问百度，发现更多</p>
                </div>
            </div>
            <div class="footer-link__item">
                <h4 class="footer-title">关注我们</h4>
                <ul class="footer-list">
                    <li class="item"><a href="#">关于我们</a></li>
                    <li class="item"><a href="#">帮助中心</a></li>
                </ul>
            </div>
            <div class="footer-link__item">
                <h4 class="footer-title">友情链接</h4>
                <ul class="footer-list">
                    <li class="item"><a href="#">关于我们</a></li>
                    <li class="item"><a href="#">帮助中心</a></li>
                    <li class="item"><a href="#">关于我们</a></li>
                    <li class="item"><a href="#">帮助中心</a></li>
                    <li class="item"><a href="#">关于我们</a></li>
                    <li class="item"><a href="#">帮助中心</a></li>
                    <li class="item"><a href="#">关于我们</a></li>
                    <li class="item"><a href="#">帮助中心</a></li>
                </ul>
            </div>
        </div>
        <div class="fopter-copyright">
            <p>©2017 ****** 版权所有。</p>
        </div>
    </div>
</footer>


<script src="__STATIC__/assest/js/jquery-1.10.2.js"></script>
<script src="__STATIC__/assest/js/script1.js"></script>

</body>
</html>